<script setup>
import { useCategoryStore } from "@/stores/category";
import { ref } from "vue";

const categoryStore = useCategoryStore();
const activeCategory = ref(null);
</script>

<template>
  <div
    class="container"
    style="width: 100%; height: 450px;"
  >
    <div
      class="aside"
      style="height: 100%; width: 250px; background-color: #2c2c2c"
    >
      <div
        class="asideItems"
        style="display: flex; justify-content: center; align-items: baseline"
        v-for="item in categoryStore.categoryList"
        :key="item.id"
        @mouseenter="activeCategory = item.id"
        @mouseleave="activeCategory = null"
      >
        <div
          class="text"
          style="margin-right: 5px; font-size: 20px; height: 50px"
        >
          {{ item.name }}
        </div>
        <div
          style="display: flex"
          v-for="i in item.children.slice(0, 2)"
          :key="i"
        >
          <div class="text" style="margin-right: 5px">{{ i.name }}</div>
        </div>
        <div class="asideHide" v-show="activeCategory === item.id">
          <div class="hideTitle" style="display: flex; align-items: baseline">
            <div style="font-size: 18px">分类推荐</div>
            <div style="margin-left: 10px">根据您的购买记录或浏览记录推荐</div>
          </div>
          <div
            class="hideMain"
            style="display: flex; flex-wrap: wrap; margin-top: 30px"
          >
            <div class="hideMainItems" v-for="i in item.goods" :key="i.id">
              <div
                class="hideMainItemsContent"
                style="
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <img style="height: 80%" :src="i.picture" />
                <div
                  class="hideMainItemsContentText"
                  style="
                    height: 80%;
                    justify-content: center;
                    flex-direction: column;
                    margin-left: 5px;
                    display: flex;
                  "
                >
                  <div
                    style="
                      font-weight: 800;
                      display: inline-block;
                      max-width: 7ch;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ i.name }}
                  </div>
                  <div
                    style="
                      display: inline-block;
                      max-width: 7ch;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ i.desc }}
                  </div>
                  <div class="price" style="color: red; font-size: 20px">
                    ￥{{ i.price }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<style scoped>
.text {
  color: #f5f5f5;
  display: flex;
  align-items: center;
}
.asideItems {
  cursor: pointer;
}
.asideItems:hover {
  background-color: #27ba9b;
}
.asideHide {
  position: absolute;
  width: 990px;
  background-color: #f5f5f5;
  height: 100%;
  left: 250px;
  top: 0;
  padding: 10px;
  z-index: 2; 
}
.hideMainItems {
  width: 250px;
  height: 100px;
  border: 1px solid #dcdada;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  margin-top: 8px;
}
</style>